<template>
	<!-- 分享按钮组件 -->
	<button class="custom-class theme-class zan-btn" :class="[inGroup ? 'zan-btn--group' : '',isLast ? 'zan-btn--last' : '' , size ? 'zan-btn--'+size : '', size === 'mini' ? 'zan-btn--plain' : '', plain ? 'zan-btn--plain' : '', type ? 'zan-btn--'+type : '', loading ? 'zan-btn--loading' : '', disabled ? 'zan-btn--disabled' : '']"
	 :disabled="disabled" hover-class="button-hover" :open-type="openType" :app-parameter="appParameter"
	 :hover-stop-propagation="hoverStopPropagation" :hover-start-time="hoverStartTime" :hover-stay-time="hoverStayTime"
	 :lang="lang" :session-from="sessionFrom" :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath"
	 :send-message-img="sendMessageImg" :show-message-card="showMessageCard" @tap="handleTap" @contact="bindcontact"
	 @getuserinfo="bindgetuserinfo" @getphonenumber="bindgetphonenumber" @error="binderror" @opensetting="bindopensetting">

	</button>

</template>

<script>
	var nativeButtonBehavior = require('./native-button-behaviors.js');
	export default {
		externalClasses: ['custom-class', 'theme-class'],
		behaviors: [nativeButtonBehavior],
		relations: {
			'../btn-group/index': {
				type: 'parent',
				linked: function linked() {
					this.setData({
						inGroup: true
					});
				},
				unlinked: function unlinked() {
					this.setData({
						inGroup: false
					});
				}
			}
		},
		props: {
			type: {
				type: String,
				value: ''
			},
			size: {
				type: String,
				value: ''
			},
			plain: {
				type: Boolean,
				value: false
			},
			disabled: {
				type: Boolean,
				value: false
			},
			loading: {
				type: Boolean,
				value: false
			},
			loading: Boolean,
			// 在自定义组件中，无法与外界的 form 组件联动，暂时不开放
			// formType: String,
			openType: String,
			appParameter: String,
			// 暂时不开放，直接传入无法设置样式
			// hoverClass: {
			// 	type: String,
			// 	value: 'button-hover'
			// },
			hoverStopPropagation: Boolean,
			hoverStartTime: {
				type: Number,
				value: 20
			},
			hoverStayTime: {
				type: Number,
				value: 70
			},
			lang: {
				type: String,
				value: 'en'
			},
			sessionFrom: {
				type: String,
				value: ''
			},
			sendMessageTitle: String,
			sendMessagePath: String,
			sendMessageImg: String,
			showMessageCard: String
		},
		data() {
			return {
				inGroup: false,
				isLast: false,
				button: null,
				hover: null
				// hoverClass:''
			};
		},
		methods: {
			handleTap: function handleTap() {
				if (this.data.disabled) {
					this.triggerEvent('disabledclick');
					return;
				}
				this.triggerEvent('btnclick');
			},
			switchLastButtonStatus: function switchLastButtonStatus() {
				var isLast = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

				this.setData({
					isLast: isLast
				});
			}
		}
	}
</script>

<style>
	.zan-btn {
		position: relative;
		color: #333;
		background-color: #fff;
		padding-left: 15px;
		padding-right: 15px;
		border-radius: 2px;
		font-size: 16px;
		line-height: 45px;
		height: 45px;
		box-sizing: border-box;
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
		overflow: visible
	}

	.zan-btn--group {
		margin-bottom: 10px
	}

	.zan-btn::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: 200%;
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
		border: 0 solid #e5e5e5;
		border-width: 1px;
		border-radius: 4px
	}

	.zan-btn--primary {
		color: #fff;
		background-color: #4b0
	}

	.zan-btn--primary::after {
		border-color: #0a0
	}

	.zan-btn--warn {
		color: #fff;
		background-color: #f85
	}

	.zan-btn--warn::after {
		border-color: #f85
	}

	.zan-btn--danger {
		color: #fff;
		background-color: #f44
	}

	.zan-btn--danger::after {
		border-color: #e33
	}

	.zan-btn--small {
		display: inline-block;
		height: 30px;
		line-height: 30px;
		font-size: 12px
	}

	.zan-btn--small.zan-btn--group {
		margin-bottom: 0;
		margin-right: 5px
	}

	.zan-btn--mini {
		display: inline-block;
		line-height: 21px;
		height: 22px;
		font-size: 10px;
		padding-left: 5px;
		padding-right: 5px
	}

	.zan-btn--mini.zan-btn--group {
		margin-bottom: 0;
		margin-right: 5px
	}

	.zan-btn--large {
		border-radius: 0;
		border: none;
		line-height: 50px;
		height: 50px
	}

	.zan-btn--large.zan-btn--group {
		margin-bottom: 0
	}

	.zan-btn--plain.zan-btn {
		background-color: transparent
	}

	.zan-btn--plain.zan-btn--primary {
		color: #06bf04
	}

	.zan-btn--plain.zan-btn--warn {
		color: #f60
	}

	.zan-btn--plain.zan-btn--danger {
		color: #f44
	}

	.button-hover {
		opacity: .9
	}

	.zan-btn--loading {
		color: transparent;
		opacity: 1
	}

	.zan-btn--loading::before {
		position: absolute;
		left: 50%;
		top: 50%;
		content: ' ';
		width: 16px;
		height: 16px;
		margin-left: -8px;
		margin-top: -8px;
		border: 3px solid #e5e5e5;
		border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
		border-radius: 8px;
		box-sizing: border-box;
		-webkit-animation: btn-spin .6s linear;
		animation: btn-spin .6s linear;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite
	}

	.zan-btn--danger.zan-btn--loading::before,
	.zan-btn--primary.zan-btn--loading::before,
	.zan-btn--warn.zan-btn--loading::before {
		border-color: #fff rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .1)
	}

	@-webkit-keyframes btn-spin {
		0% {
			-webkit-transform: rotate(0);
			transform: rotate(0)
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg)
		}
	}

	@keyframes btn-spin {
		0% {
			-webkit-transform: rotate(0);
			transform: rotate(0)
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg)
		}
	}

	.zan-btn.zan-btn--disabled {
		color: #999 !important;
		background: #f8f8f8 !important;
		border-color: #e5e5e5 !important;
		cursor: not-allowed !important;
		opacity: 1 !important
	}

	.zan-btn.zan-btn--disabled::after {
		border-color: #e5e5e5 !important
	}

	.zan-btn--group.zan-btn--last {
		margin-bottom: 0;
		margin-right: 0
	}
</style>
